<template>
  <MyModal ref="myModal" title="修改" :top="40" :width="600">
    <template #content>
      <div style="display: grid; place-items: center">
        <a-form ref="loginForm" :model="formState" style="width: 500px">
          <a-form-item has-feedback name="answerText">
            <a-textarea
              ref="textareaRef"
              :rows="10"
              v-model:value="formState.answerText"
              placeholder="回复内容"
              autocomplete="off"
              style="max-height: 456px"
              @click="getPosition"
            ></a-textarea>
          </a-form-item>

          <a @click="selectEmoji">
            <SmileOutlined style="font-size: 26px" />
          </a>

          <a-form-item>
            <div style="width: 500px">
              <a-tag
                style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
                v-for="(item, index) in tagList"
                :key="index"
                @click="copyTag(item)"
              >
                {{ item }}
              </a-tag>
            </div>
          </a-form-item>

          <a-form-item style="text-align: right">
            <a-button style="margin-right: 10px;border-radius: 6px;" @click="myModal.cancelModal()">取消</a-button>
            <a-button type="primary" style="border-radius: 6px;" @click="handleSubmit">完成</a-button>
          </a-form-item>
        </a-form>

        <Emoji ref="emojiRef" @okEmoji="setOkEmoji"></Emoji>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as questionAnswerApi from '@/api/questionAnswer'
import { copyToCliboard } from '@/hooks/util.ts'
import { message } from 'ant-design-vue'
import Emoji from './Emoji.vue'

const myModal = ref()
const emojiRef = ref()
const textareaRef = ref()

const rowInfo = ref<any>()
const showModal = (record: any) => {
  rowInfo.value = record
  tagList.value = record.variables.split(',')
  formState.value.answerText = record.content
  myModal.value?.showModal()
}

const tagList = ref([])

const emit = defineEmits<{
  refresh: [rowInfo: any]
}>()

defineExpose({
  showModal,
})

interface formState {
  answerText: string
}
const formState = ref<formState>({
  answerText: '',
})

// 复制文本
const copyTag = (text: string) => {
  copyToCliboard(text)
}

const handleSubmit = () => {
  rowInfo.value!.content = formState.value.answerText
  // console.log('rowInfo=', rowInfo.value)

  emit('refresh', rowInfo.value)
  myModal.value?.cancelModal()
}

const getCursorPosition = (inputElement: HTMLInputElement) => {
  if (!inputElement) return 0
  const selectionStart = inputElement.selectionStart
  const selectionEnd = inputElement.selectionEnd
  if (selectionStart === selectionEnd) return selectionStart
  return selectionStart
}

// 获取文本域的光标位置
let cursorPosition = ref<number>(0)
const getPosition = () => {
  // 确保textareaRef是一个DOM元素
  if (textareaRef.value && textareaRef.value.$el) {
    const textareaElement = textareaRef.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
    // console.log('cursorPosition=', cursorPosition.value)
  } else {
    console.log('textareaRef未定义或不是DOM元素')
  }
}

// 选择表情
const selectEmoji = () => {
  emojiRef.value.showModal()
}

// 已经选好表情
const setOkEmoji = (args: string) => {
  // console.log('args=', args)
  // 从原始字符串的position位置开始截取到末尾的子串
  let substringAfterPosition = formState.value.answerText.slice(cursorPosition.value)
  // 拼接新字符串和截取后的子串
  let result =
    formState.value.answerText.slice(0, cursorPosition.value) + args + substringAfterPosition
  formState.value.answerText = result
  // console.log('formState.value.answerTex=', formState.value.answerText)
}
</script>
